<template>
    <div class="bi-county-symptom-list" v-loading="loading">
        <div class="bi-county-symptom-list__main">
            <div
                class="bi-county-symptom-list__row"
                v-for="(row, rowIndex) in showItems"
                :class="['is-' + rowItemsEnum[row.length]]"
                :key="rowIndex"
            >
                <div
                    class="bi-county-symptom-list__item has-icon"
                    v-for="(item, index) in row"
                    :key="index"
                    @click="handleItemClick(item)"
                >
                    <span class="bi-county-symptom-list__item-label">
                        {{item.name}}
                    </span>
                    <span class="bi-county-symptom-list__item-text">
                        <span class="bi-county-symptom-list__item-value">
                            {{item.num}}
                        </span>
                        <span class="bi-county-symptom-list__item-unit">人</span>
                    </span>
                </div>
                <div v-if="row.length === 1" class="bi-county-symptom-list__item"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'BiCountySymptomList',
    props: {
        data: {
            type: Array,
            default: () => []
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {

        }
    },
    computed: {
        sortItems () {
            return this.data.sort((a, b) => {
                return b.num - a.num
            })
        },
        showItems () {
            return this.sortItems.reduce((rs, v, i) => {
                const index = Math.floor(i / 2)
                if (!rs[index]) {
                    rs[index] = []
                }
                rs[index].push(v)
                return rs
            }, [])
        },
        rowItemsEnum () {
            return {
                '1': 'one',
                '2': 'two'
            }
        }
    },
    methods: {
        handleItemClick (item) {
            this.$emit('item-click', {
                item
            })
        }
    }
}
</script>
<style lang="scss">
.bi-county-symptom-list{
    background: #FFFFFF;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 14px;
    position: relative;
    color: #868686;
    min-height: 200px;
    .el-loading-mask{
        position: absolute;
    }
}
.bi-county-symptom-list__row{
    display: flex;
    flex-direction: row;
    &:last-child{
        .bi-county-symptom-list__item{
            border-bottom: 0;
        }
    }
}
.bi-county-symptom-list__item{
    flex: 1;
    min-width: 0;
    line-height: 24px;
    padding: 12px 4px;
    box-sizing: content-box;
}
.bi-county-symptom-list__item{
    border-bottom: 1PX solid #D0D0D0;
    position: relative;
    display: flex;
    &.has-icon{
        &:before{
            content: '';
            width: 20px;
            height: 20px;
            display: inline-block;
            background: url('./icons/address.svg') no-repeat 50% 50%;
            background-size: 80%;
            vertical-align: top;
            margin-top: 2px;
            margin-right: 6px;
        }
    }
    &:first-child{
        margin-right: 8px;
    }
    &:last-child{
        margin-left: 8px;
    }
}
.bi-county-symptom-list__item-label{
    padding-right: 10px;
    flex: 1;
}
.bi-county-symptom-list__item-text{
    white-space: nowrap;
    color: #000;
}
.bi-county-symptom-list__item-value{
    font-weight: bold;
    font-size: 15px;
}
</style>
